<template>
    <div>
        <el-card style="height: 30vh">
            <div style="margin-left: 20px">
                <span style="font-size: 18px">基本信息</span>

                <div style="display: flex;margin-top: 20px;">

                    <div style="margin-right: 50px">

                        <div style="width: 300px;height: 100px;background-color: #75cdff;border-radius: 5px;display: flex;flex-direction: row">
                            <el-avatar v-if="this.store.avatar===null || this.store.avatar===''"
                                       icon="el-icon-store-solid"></el-avatar>
                            <img v-if="!(this.store.avatar===null || this.store.avatar==='')" :src="this.store.avatar"
                                 style="border-radius: 50%;margin: 25px 10px" width="50" height="50">
                            <span style="font-size: 15px;color: white;margin: 40px 10px;overflow: hidden">{{
                                this.store.username
                                }}</span>
                        </div>

                        <div style="width: 300px; background-color:#f5f5f5;border-radius: 5px;margin-top: 10px">
                            <span style="font-size: 14px;margin: 20px">上次登录时间：{{
                                this.store.loginTime ? this.store.loginTime : "暂未登录"
                                }}</span>
                        </div>

                    </div>


                    <el-descriptions class="margin-top" size="small" :column="2" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-s-finance"></i>
                                ID
                            </template>
                            {{ this.store.id }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user"></i>
                                账号
                            </template>
                            {{ this.store.username }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-user-solid"></i>
                                店铺名称
                            </template>
                            {{ this.store.name }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-mobile-phone"></i>
                                手机号
                            </template>
                            {{ this.store.phone }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-s-promotion"></i>
                                电子邮箱
                            </template>
                            {{ this.store.email }}
                        </el-descriptions-item>


                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                居住地
                            </template>
                            {{ this.store.address }}
                        </el-descriptions-item>


                        <el-descriptions-item contentStyle="word-break:break-all;">
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                店铺介绍
                            </template>
                            {{ this.store.detail }}
                        </el-descriptions-item>

                    </el-descriptions>

                </div>

            </div>
        </el-card>


        <el-card style="margin-top: 10px;">


            <el-tabs v-model="activeNameStoreInfo" @tab-click="handleClickStoreInfo">
                <el-tab-pane label="TA的订单" name="first">


                    <el-card style="width: 100%; ">

                        <!--          订单信息    标题-->
                        <div slot="header" class="clearfix">
                            <span style="font-weight: bold;font-size: 18px">订单信息</span>
                        </div>


                        <!--     订单信息列表    展示-->
                        <template>
                            <el-table height="330"
                                      :header-cell-style="{fontSize: '14px','text-align':'center'}"
                                      :cell-style="{'text-align':'center'}"
                                      :data="ordersProduct"
                                      stripe
                                      style="width: 100%">
                                <el-table-column width="50" label="序号" type="index" align="center"></el-table-column>
                                <el-table-column prop="orders.number" label="订单号" show-overflow-tooltip
                                                 width="200px"></el-table-column>
                                <el-table-column prop="product.name" label="商品名称" width="170px"
                                                 show-overflow-tooltip></el-table-column>

                                <el-table-column prop="orders.payment" label="订单金额" show-overflow-tooltip
                                                 width="100px"></el-table-column>

                                <el-table-column label="订单状态" width="100">
                                    <template slot-scope="scope">
                                        <el-tag type="danger" v-if="scope.row.status===0">未付款</el-tag>
                                        <el-tag type="success" v-if="scope.row.status===1">待发货</el-tag>
                                        <el-tag v-if="scope.row.status===2">已发货</el-tag>
                                        <el-tag type="warning" v-if="scope.row.status===3">待签收</el-tag>
                                        <el-tag type="success" effect="dark" v-if="scope.row.status===4">已签收</el-tag>
                                        <el-tag type="warning" v-if="scope.row.status===5">未评价</el-tag>
                                        <el-tag type="success" effect="dark" v-if="scope.row.status===6">已评价</el-tag>
                                    </template>
                                </el-table-column>

                                <el-table-column label="支付状态" width="100">
                                    <template slot-scope="scope">
                                        <el-tag type="warning" v-if="scope.row.orders.payStatus===0">未支付</el-tag>
                                        <el-tag type="success" effect="dark" v-if="scope.row.orders.payStatus===1">
                                            已支付
                                        </el-tag>
                                    </template>
                                </el-table-column>

                                <el-table-column label="支付类型" width="100">
                                    <template slot-scope="scope">
                                        <el-tag type="success" effect="dark" v-if="scope.row.orders.paymentType===0">
                                            微信
                                        </el-tag>
                                        <el-tag effect="dark" v-if="scope.row.orders.paymentType===1">支付宝</el-tag>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="orders.createTime" label="下单时间" show-overflow-tooltip
                                                 width="150px"></el-table-column>

                                <el-table-column label="操作">

                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                icon="el-icon-search"
                                                @click="handleInfoButton(scope.row)">查看
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="发货">

                                    <template slot-scope="scope">

                                        <el-button
                                                size="mini"
                                                v-if="scope.row.status===1"
                                                type="primary" icon="el-icon-s-goods"
                                                @click="handleSendButton(scope.row)">发货
                                        </el-button>


                                        <el-tag v-if="scope.row.status!==1" style="width: 70px">
                                            {{ scope.row.status === 1 ? '未发货' : '已发货' }}
                                        </el-tag>


                                    </template>
                                </el-table-column>


                            </el-table>

                        </template>

                        <el-pagination
                                style="float: right;margin: 20px 0"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage"
                                :page-sizes="pageSizes"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next"
                                background
                                :total="total">
                        </el-pagination>
                    </el-card>


                </el-tab-pane>
                <el-tab-pane label="TA的商品" name="second">


                    <template>
                        <el-table height="410"
                                  :header-cell-style="{fontSize: '14px','text-align':'center'}"
                                  :cell-style="{'text-align':'center'}"
                                  :data="products"
                                  stripe
                                  style="width: 100%">
                            <el-table-column width="50" label="序号" type="index" align="center"></el-table-column>

                            <el-table-column prop="name" label="商品名称" show-overflow-tooltip
                                             width="120px"></el-table-column>
                            <el-table-column prop="price" label="价格" width="80px"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column prop="category.name" label="商品类型" width="120px"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column prop="store.name" label="商家名称" show-overflow-tooltip
                                             width="120px"></el-table-column>
                            <el-table-column prop="detail" label="商品介绍" show-overflow-tooltip
                                             width="200px"></el-table-column>
                            <el-table-column prop="stock" label="库存" show-overflow-tooltip
                                             width="100px"></el-table-column>
                            <el-table-column prop="sales" label="销量" show-overflow-tooltip
                                             width="100px"></el-table-column>
                            <el-table-column label="状态" width="100">
                                <template slot-scope="scope">
                                    <!--    状态：0.下架；1.上架；2.缺货；3.预售；4.售罄；5.限时特惠  6.待审核       -->
                                    <el-tag type="danger" effect="dark" v-if="scope.row.status==0">已下架</el-tag>
                                    <el-tag type="success" effect="dark" v-if="scope.row.status==1">上架中</el-tag>
                                    <el-tag type="warning" effect="dark" v-if="scope.row.status==2">缺货中</el-tag>
                                    <el-tag type="warning" v-if="scope.row.status==3">预售中</el-tag>
                                    <el-tag type="danger" v-if="scope.row.status==4">已售罄</el-tag>
                                    <el-tag type="success" v-if="scope.row.status==5">限时特惠</el-tag>
                                    <el-tag type="info" effect="dark" v-if="scope.row.status==6">待审核</el-tag>
                                </template>
                            </el-table-column>

                            <!--      图片显示    -->
                            <el-table-column prop="image" label="图片" width="180px">
                                <template slot-scope="scope">
                                    <el-avatar shape="square" :size="100" fit="fill" :src="scope.row.image"></el-avatar>
                                </template>
                            </el-table-column>


                        </el-table>
                        <el-pagination
                                style="float: right;margin: 20px 0"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage"
                                :page-sizes="pageSizes"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next"
                                background
                                :total="total">
                        </el-pagination>
                    </template>

                </el-tab-pane>
                <!--              <el-tab-pane label="TA的评价" name="third">TA的评价</el-tab-pane>-->
                <!--              <el-tab-pane label="TA的销售分析" name="fourth">TA的销售分析</el-tab-pane>-->
            </el-tabs>


        </el-card>
    </div>
</template>


<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "StoreInfo",
    data() {
        return {
            store: {},            // 用户信息
            storeId: '',           // 商家ID
            activeNameStoreInfo: 'first',      //  tab绑定切换名称
            orders: [],      // 用户的订单
            products: [],      // 用户的收藏商品

            ordersProductId: '',             // 存储被删除订单的id
            ids: [],                 // 存储被选中订单的id
            ordersProduct: [],              // 存储订单信息

            currentPage: 1,         // 当前页码
            pageSizes: [5, 10, 50, 100], // 每页显示条数
            pageSize: 5,            // 每页显示条数
            total: 0,               // 用户总数

            // 订单状态：0已取消；1未付款；2已付款；3待发货；4已发货；5待签收；6已签收；7未评价；
            statuss: [{             // 存储所有状态
                value: -1,
                label: '全部'
            }, {
                value: 1,
                label: '未付款'
            }, {
                value: 2,
                label: '已付款'
            }],

            // 支付状态：0未支付；1已支付
            payStatuss: [{             // 存储支付状态
                value: 0,
                label: '未支付'
            }, {
                value: 1,
                label: '已支付'
            }],

            // 付款类型:0微信，1支付宝
            paymentTypes: [{             // 存储付款类型
                value: 0,
                label: '微信'
            }, {
                value: 1,
                label: '支付宝'
            }],
        }
    },
    mounted() {
        this.$request.get('/store/storeInfo' + '?id=' + this.$route.query.id).then(res => {
            if (res.code === '200') {

                this.store = res.data
                // console.log(this.store)
                this.storeId = this.store.id;
                this.store.loginTime = this.timeFormate(this.store.loginTime)
                this.store.createTime = this.timeFormate(this.store.createTime)

                this.selectByPage()
                console.log(this.ordersProduct)
            } else {
                this.$message.error(res.msg)
            }

        })


        // this.loadOrders()
    },
    methods: {

        handleInfoButton(ordersProduct) {
            console.log(ordersProduct)
            // let ordersProductId = ordersProduct.id
            this.$router.push({name: 'orderInfoManager', params: {ordersProduct: ordersProduct}})
        },


        handleSendButton(ordersProduct) {
            // this.dialogVisible_delete = true
            let ordersProductId = ordersProduct.id
            let productId = ordersProduct.product.id
            // console.log(ordersProductId)
            // console.log(productId)
            //  实现发货请求：
            this.$request.post('/ordersProduct/send?id=' + ordersProductId).then(res => {
                if (res.code === '200') {
                    this.$message.success('发货成功')
                    this.searchByManyConditionNoMsg()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },

        // 分页查找
        selectByPage() {
            this.$request.post('/ordersProduct/selectByPageInStore?currentPage=' + this.currentPage
                + '&pageSize=' + this.pageSize
                + '&storeId=' + this.storeId
            ).then(res => {
                if (res.code === '200') {
                    // console.log(res)
                    this.ordersProduct = res.data.list;
                    this.total = res.data.total;
                    // console.log(this.ordersProduct)
                    // this.$message.success('查询成功');
                } else {
                    this.$message.error(res.msg);
                }
            })
        },


        // tab切换
        handleClickStoreInfo(tab, event) {

            if (tab.index == 0) {
                // console.log("发起请求：TA的订单")
                //网络请求1
                this.loadOrders()
                // console.log(this.orders)
            } else if (tab.index == 1) {
                // console.log("发起请求：TA的收藏")
                //网络请求2
                this.loadProduct()
                // console.log(this.products)
            } else {
                // console.log("发起请求：其他")
                //网络请求3
            }
        },

        loadOrders() {
            this.$request.get('/orders/loadStoreOrders' + '?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&id=' + this.$route.query.id).then(res => {
                if (res.code === '200') {
                    this.orders = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg)
                }
            })
        },


        loadProduct() {
            this.$request.get('/product/loadStoreProducts' + '?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&id=' + this.$route.query.id).then(res => {
                if (res.code === '200') {
                    this.products = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg)
                }
            })
        },


        //  pageSize 改变时会触发
        handleSizeChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.pageSize = val;
            this.currentPage = 1;

            // 发送请求获取相应数量的数据
            if (this.activeNameStoreInfo === 'first') {
                this.selectByPage()
            } else if (this.activeNameStoreInfo === 'second') {
                this.loadProduct()
            }
        },


        // currentPage 改变时会触发
        handleCurrentChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.currentPage = val;

            // 发送请求获取相应数量的数据
            if (this.activeNameStoreInfo === 'first') {
                this.selectByPage()
            } else if (this.activeNameStoreInfo === 'second') {
                this.loadProduct()
            }
        },


        // 显示时间格式化
        timeFormate(timestamp) {
            const date = new Date(timestamp);

            const year = date.getFullYear(); // 年份
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份，注意要加 1，且补零
            const day = String(date.getDate()).padStart(2, '0'); // 日期，补零
            const hours = String(date.getHours()).padStart(2, '0'); // 小时，补零
            const minutes = String(date.getMinutes()).padStart(2, '0'); // 分钟，补零
            const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒钟，补零

            const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            return formattedDateTime;

        }
    }
})
</script>
<!--.el-descriptions__body .el-descriptions__table {-->
<!--white-space: nowrap;-->
<!--}-->
<style>


.el-descriptions-item__content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
    max-width: 750px;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;

}


</style>